<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></script>
<title>js-2dmath: Beizer solve</title>

<script src="../dist/js-2dmath-browser.min.js" type="text/javascript" ></script>
<!--
<script src="../debug/js-2dmath-browser-debug.js" type="text/javascript" ></script>
-->

</head>
<body>
<h1>js-2dmath: isVec2Inside</h1>
<canvas id="canvas" width="640" height="480" style="border: 1px solid red;"></canvas>
<p>Move the mouse inside the polygons, should get green :)</p>
</body>
</html>

<script>
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    mouse = [0, 0];

require("js-2dmath").globalize(window);

function getMousePosition(mouse, e) {
    if (e.pageX != undefined && e.pageY != undefined) {
        mouse[0] = e.pageX;
        mouse[1] = e.pageY;
    }
    else {
        mouse[0] = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        mouse[1] = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    mouse[0] -= canvas.offsetLeft;
    mouse[1] -= canvas.offsetTop;
}

canvas.addEventListener("mousemove", function(e) {
    getMousePosition(mouse, e);
}, false);

var tri = Triangle.create(50, 0, 50, 50, 25, 50),
    rect = Rectangle.create(75, 75, 100, 100),
    circle = Circle.create(200, 50, 40),
    line = Line2.create(300, 150, -1),
    seg2 = Segment2.create(50, 300, 100, 300),
    poly = Polygon.create([350, 350], [375, 375], [350, 300]),
    poly2 = Polygon.create([250, 250], [250, 275], [275, 250], [275, 225]);

function update() {
    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    window.requestAnimFrame(update);


    Draw.vec2(ctx, mouse, "green");

    Draw.line2(ctx, line, Line2.isVec2Inside(line, mouse) ? "green" : "red", 150);

    Draw.polygon(ctx, tri, Triangle.isVec2Inside(tri, mouse) ? "green" : "red");

    Draw.rectangle(ctx, rect, Rectangle.isVec2Inside(rect, mouse) ? "green" : "red");

    Draw.circle(ctx, circle, Circle.isVec2Inside(circle, mouse) ? "green" : "red");

    Draw.segment2(ctx, seg2, Segment2.isVec2Inside(seg2, mouse) ? "green" : "red");

    Draw.polygon(ctx, poly, Polygon.isVec2Inside(poly, mouse) ? "green" : "red");
    Draw.polygon(ctx, poly2, Polygon.isVec2Inside(poly2, mouse) ? "green" : "red");


    ctx.restore();
}
window.requestAnimFrame(update);

</script>
